<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page import="com.kaishengit.dao.*" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>商品</title>
    <style type="text/css">
    	.btn{
  		  margin-left: 65px
  		}
    </style>
  </head>
  <body>
   	
   		<table  border="1">
   			<thead>
   				<tr>
   					<th>商品编号</th>
   					<th>名称</th>
   					<th>价格</th>
   					<th>是否上架</th>
   					<th colspan="2">操作</th>
   					 
   				</tr>
   			</thead>
   			<tbody id="a">
   				<c:if test="${empty list}">
					<tr>
						<td colspan="3">暂时没有数据:)</td>
				</tr>
				</c:if>
				<c:forEach items="${list }" var="pro">
				<tr id="${pro.id}">
					<td>${pro.id}</td>
					<td>${pro.proName}</td>
					<td>${pro.price}</td>
					<td>${pro.onsale}</td>
					<td>
						<a rel="${pro.id}" href ="javascript:void(0)" onclick="lookrow(event)" id="look">查看</a>
					<td><a rel="${pro.id}" href ="javascript:void(0)" name="delrow" id="del">删除</a>
					</td>
				</tr>
				</c:forEach>
   			</tbody>
   		</table>
   	
   		<center>添加商品名称</center>
   		
	   		商品编号:<input type="text" name="id" id="id"> 
	   		商品名称:<input type="text" name="proName" id="proName"><br>
	   		商品价格:<input type="text" name="price" id="price">
	   		是否上架:<input type="radio" name="onsale" value="true" >&nbsp;是
	   		   	  <input type="radio" name="onsale" value="false" >&nbsp;否<br>
	   		  		
	   	  <input type="button" value="添加" id="addrow" onclick="sendAjax()"/>
	   	 
	   	  <script type="text/javascript" src="js/json.js"></script>
		  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	   	  <script type="text/javascript">
	   	  
	     /* 	var xmlHttp;
  		
  		/*创建XMLHttpRequest对象*/
  		function createXMLHttpRequest() {
  			if(window.ActiveXObject) {
  	  			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  	  		} else {
  	  			xmlHttp = new XMLHttpRequest();
  	  		}
  		}
		
			
  	/*删除数据	*/
  	
  		/* var dels = document.getElementsByName("delrow");
		    	for(var i = 0;i < dels.length;i++) {
		    		dels[i].onclick = delRow;
		    	}
    	
    	var Tr;
    	function delRow(){
    		createXMLHttpRequest();
    		//alert(this.rel);
 			Tr = this.parentNode.parentNode;
    		xmlHttp.open("POST", "pro.jspx", true);
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.onreadystatechange = delBack; 
            xmlHttp.send("task=del&id="+this.rel); 
    	}
    	
    	function  delBack(){
    		if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
  				document.getElementsByTagName("tbody")[0].removeChild(Tr);
  				}
  			}
    	} 
    	
  		 */
  		
		/* var id;
		function delrow(event){
			createXMLHttpRequest();
			var evt = event || window.event;
	  		var element = evt.srcElement || evt.target;
	  		id = element.rel;
	  		xmlHttp.onreadystatechange = delcallback;
			xmlHttp.open("GET", "pro.jspx?task=del&id="+id, true);
			xmlHttp.send();
		}
  		
  		function delcallback(){
  			if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
  				var tr=document.getElementById(id);
  				document.getElementById("a").removeChild(tr);
  		}
  	}
  } */
  		/*查询数据	*/
  	
  		var id;
  		function lookrow(event){
  			createXMLHttpRequest();
  			var evt = event || window.event;
	  		var element = evt.srcElement || evt.target;
	  		id = element.rel;
	  		xmlHttp.onreadystatechange = chakancallback;
			xmlHttp.open("GET", "pro.jspx?task=update&id="+id, true);
			xmlHttp.send();
  			}
  		
  	
  		function chakancallback(){
  			if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
  					var json = JSON.parse(xmlHttp.responseText);
  					var date=json.id;
  					var price=json.price;
  					var name=json.proName;
  					var onsale=json.onsale;
  					
  					document.getElementById("id").value=date;
  					document.getElementById("price").value=price;
  					document.getElementById("proName").value=name;
  					var radios = document.getElementsByName("onsale");
				
					for(var i=0;i < radios.length;i++){
						if(radios[i].value == onsale){
							radios[i].checked = true;
						}
				} 
  					
				}
  					/* var xml = xmlHttp.responseXML;
  					var date=xml.getElementsByTagName("date")[0].childNodes[0].nodeValue;
  					var price=xml.getElementsByTagName("price")[0].childNodes[0].nodeValue;
  					var name=xml.getElementsByTagName("proName")[0].childNodes[0].nodeValue;
  					var onsale=xml.getElementsByTagName("onsale")[0].childNodes[0].nodeValue; */
  					
  					//document.getElementById("id").value=date;
  					/* 
  					document.getElementById("price").value=price;
  					document.getElementById("proName").value=name;
  					var radios = document.getElementsByName("onsale");
				
					for(var i=0;i < radios.length;i++){
						if(radios[i].value == onsale){
							radios[i].checked = true;
						}
				} */
  					
  			}
  		}
  	
  		
  	
  		function sendAjax(){
  			createXMLHttpRequest();
  			var id = document.getElementById("id").value;
  			var proName = document.getElementById("proName").value;
  			var price = document.getElementById("price").value;
  			var radios = document.getElementsByName("onsale");
			var onsale;
			for(var i=0;i < radios.length;i++){
				if(radios[i].checked == true){
					onsale = radios[i].value;
				}
			}
  			
  			xmlHttp.open("POST", "pro.jspx?task=add", true);
  			xmlHttp.onreadystatechange = callback;
  			
  			xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  			xmlHttp.send("task=add&id="+id+"&proName="+proName+"&price="+price+"&onsale="+onsale);
  		}
  		
  		function callback() {
  			if(xmlHttp.readyState == 4) {
  				if(xmlHttp.status == 200) {
  				var id = document.getElementById("id").value;
	  			var proName = document.getElementById("proName").value;
	  			var price = document.getElementById("price").value;
	  			var radios = document.getElementsByName("onsale");
				var onsale;
				for(var i=0;i < radios.length;i++){
					if(radios[i].checked == true){
						onsale = radios[i].value;
					}
				}
  				var tr=document.createElement("tr");
	  					
	  			var td1=document.createElement("td");
	  			var idrow= document.createTextNode(id);
	  			td1.appendChild(idrow);
	  			
	  			var td2=document.createElement("td");
	  			var proNamerow= document.createTextNode(proName);
	  			td2.appendChild(proNamerow);
	  			
	  			var td3=document.createElement("td");
	  			var peicerow= document.createTextNode(price);
	  			td3.appendChild(peicerow);
	  			
	  			var td4=document.createElement("td");
	  			var onsalerow= document.createTextNode(onsale);
	  			td4.appendChild(onsalerow);
	  			
	  			var td5 = document.createElement("td");
					var a = document.createElement("a");
					a.setAttribute("href", "javascript:void(0)");
					a.setAttribute("id", look);
					a.setAttribute("rel", id);
	  			
	  				a.appendChild(document.createTextNode("查看"));
					td5.appendChild(a);
	  			
	  			
	  			
	  			var td6 = document.createElement("td");
					var a1 = document.createElement("a");
					a1.setAttribute("href", "javascript:void(0)");
					a1.setAttribute("id", del);
					a1.setAttribute("rel", id);
	  				a1.onclick = delRow;
	  				a1.appendChild(document.createTextNode("删除"));
					td6.appendChild(a1);
	  			
	  				tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					tr.appendChild(td4);
					tr.appendChild(td5);
					tr.appendChild(td6);
					
					document.getElementsByTagName("tbody")[0].appendChild(tr);
	  			
	  			
  				
  				
  					/* var xml = xmlHttp.responseXML;
  					
  					
	  					var tr=document.createElement("tr");
	  					
	  					var td1=document.createElement("td"); */
	  					//td1.innerHTML = xml.getElementsByTagName("date")[0].childNodes[0].nodeValue;
	  					
	  					
	  					/*
	  					var td2=document.createElement("td");
	  					td2.appendChild(xml.getElementsByTagName("proName")[0].childNodes[0].nodeValue);
	  					var td3=document.createElement("td");
	  					td3.appendChild(xml.getElementsByTagName("price")[0].childNodes[0].nodeValue);
	  					var td4=document.createElement("td");
	  					td4.appendChild(xml.getElementsByTagName("onsale")[0].childNodes[0].nodeValue);
	  					
	  					var a=document.createElement("a");
	  					a.setAttribute("href","javascript:void(0)");
	  					a.setAttribute("id", "del");
	  					a.appendChild(document.createTextNode("删除 "));
	  					a.onclick=delrow;
	  					var td5=document.createElement("td");
	  					td5.appendChild(a);
	  					
	  					tr.appendChild(td1);
	  					tr.appendChild(tr2);
	  					tr.appendChild(tr3);
	  					tr.appendChild(tr4);
	  					tr.appendChild(tr5);
	  					*/
	  					//tr.appendChild(td1);
	  					/* var tbody = document.getElementById("a");
	  					var row = tbody.insertRow(tbody.rows.length);
	  					
	  					row.insertCell(0);
	  					row.cells[0].innerHTML = xml.getElementsByTagName("date")[0].childNodes[0].nodeValue;
	  					row.insertCell(1);
	  					row.cells[1].innerHTML = xml.getElementsByTagName("proName")[0].childNodes[0].nodeValue;
	  					row.insertCell(2);
	  					row.cells[2].innerHTML = xml.getElementsByTagName("price")[0].childNodes[0].nodeValue;
	  					row.insertCell(3);
	  					row.cells[3].innerHTML = xml.getElementsByTagName("onsale")[0].childNodes[0].nodeValue;
	  					//tbody.appendChild(tr);
	  					row.insertCell(4);
						row.cells[4].innerHTML = '<a rel=' + id + '  onclick="delrow(event)">查看</a>' + '<a rel=' + id + '  onclick="lookrow(event)">删除</a>'; */
  					}else {
  	  					alert("Ajax Error1!");
  	  				}
  					
  				} 
  			
	   	  }
	   	 
	   	
	   	  </script>
   	  
  </body>
</html>
